<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>社医堂</title>
<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/iconfont.css" />
</head>
<style type="text/css">
    #kk{border-top:solid #eee 1px;border-bottom:solid #eee 1px;}
    #kk [class*=aui-col-]{padding-top:10px;padding-bottom:5px;}
    #kk [class*=aui-col-] img{margin:auto;}
    #kk #one1{width:10%;padding-left:3px;padding-right:3px;}
    #kk #one2{width:50%;padding-left:3px;padding-right:3px;}
    #kk #one3{width:10%;padding-left:3px;padding-right:3px;}
    #kk #one4{width:10%;padding-left:3px;padding-right:3px;}
    #kk #one5{width:20%;padding-left:3px;padding-right:3px;}
    
    #oo{height:300px; overflow:scroll;display:none;}
    #oo .aui-col-xs-2{width:10%;padding-top:10px;padding-bottom:5px;}
    #oo .aui-col-xs-2 img{margin:auto;}
    
    #jiahao{height:120px; overflow:scroll;display:none;}
    
    .aui-chat .aui-chat-right .aui-chat-content {background-color:#24b16e;color:#FFF}
    .aui-chat .aui-chat-right .aui-chat-arrow {
        background-image: -webkit-linear-gradient(45deg, #24b16e, #24b16e 50%, transparent 50%);
        background-image: linear-gradient(45deg, #24b16e, #24b16e 50%, transparent 50%);
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        right: -0.25rem;
    }
    
    #showbigpic{position:absolute;top:0px;left:0px;z-index:999999}
    
    </style>
<body>

    <section class="aui-grid" style="position:fixed;bottom:0px;width:100%;">
        <div class="aui-row" id="kk">
            <div class="aui-col-xs-2" id="one1">
                <img src="../../../image/chat/images/luyin1.png" id="ly" onClick="luyin()" />
            </div>
            <div class="aui-col-xs-4" id="one2">
                <textarea style="height:auto" id="content" placeholder="请输入聊天内容"></textarea>
                <div id="anzhushuohua" style="display:none" class="aui-btn aui-btn-default aui-margin-r-5">按住说话</div>
            </div>
            <div class="aui-col-xs-2" id="one3">
                <img id="xl" src="../../../image/chat/images/xiaolian1.png" style="width:90%;margin-top:2px;" onClick="xiaolian()" />
            </div>
            <div class="aui-col-xs-2" id="one4">
                <img id="jh" src="../../../image/chat/images/jiahao1.png" onClick="jiahao()" />
            </div>
            <div class="aui-col-xs-2" id="one5">
                <div class="aui-btn aui-btn-info aui-margin-r-5" onClick="sendpost(0)">发送</div>
            </div>
        </div>
        <div class="aui-row" id="oo">
        
            <div class="aui-tab" id="tab">
                <div class="aui-tab-item aui-active">经典</div>
                <div class="aui-tab-item"><div></div>流氓兔</div>
                <div class="aui-tab-item"></div>
                <div class="aui-tab-item"></div>
            </div>
            <span id="touxiang_1">
                
            </span>
            <span id="touxiang_2" style="display:none">
                
            </span>
      
        </div>
        
        <div class="aui-row" id="jiahao">
          <div class="aui-col-xs-3" onClick="uploadpic()" style="padding:10px;width:80px;"><input style="opacity:0;width:60px;height:60px;background-size:100%;position:absolute;z-index:999999;" type="file" id="upfile"><img src="../../../image/chat/images/uploadpic.png" style="width:60px;height:60px;">图片</div>
        </div>
        
      
      </section>

<script src="../../../script/hui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../script/hui-tab.js" type="text/javascript"></script>
<script src="../../../script/api.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../script/stm.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../script/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../script/aui-tab.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
apiready = function() {

    var tab = new auiTab({
        element:document.getElementById("tab"),
    },function(ret){
        a = ret.index
        for(var i=1;i<=2;i++){
            if(i==a){
                $("#touxiang_"+i).show();
            }else{
                $("#touxiang_"+i).hide();
            }	
        }
    });

    var touxiang1='';
    for(var i=1;i<76;i++){
        touxiang1 += '<div class="aui-col-xs-2" onClick="insertText(\'[em_1_'+i+']\')"><center><img src="../../../image/chat/face1/'+i+'.gif" /></center></div>';
    }
    $("#touxiang_1").html(touxiang1);

    var touxiang2='';
    for(var i=1;i<65;i++){
        touxiang2 += '<div class="aui-col-xs-2" onClick="insertText(\'[em_1_'+i+']\')"><center><img src="../../../image/chat/face2/'+i+'.gif" /></center></div>';
    }
    $("#touxiang_2").html(touxiang2);

};



function xiaolian(){
	obj = document.getElementById("oo");
	if(oo.style.display=="none"||oo.style.display==""){
		oo.style.display = "block";
		document.getElementById("jiahao").style.display = "none";
		document.getElementById("xl").src = "../../../image/chat/images/xiaolian2.png";
	}else{
		oo.style.display = "none";
		document.getElementById("xl").src = "../../../image/chat/images/xiaolian1.png";
	}
}

function jiahao(){
	obj = document.getElementById("jiahao");
	if(obj.style.display=="none"||obj.style.display==""){
		obj.style.display = "block";
		document.getElementById("oo").style.display = "none";
		document.getElementById("jh").src = "../../../image/chat/images/jiahao2.png";
	}else{
		obj.style.display = "none";
		document.getElementById("jh").src = "../../../image/chat/images/jiahao1.png";
	}
}

function luyin(){
	obj = document.getElementById("content");
	obj1 = document.getElementById("anzhushuohua");
	if(obj1.style.display=="none"||obj1.style.display==""){
		obj.style.display = "none";
		obj1.style.display = "block";
		document.getElementById("ly").src = "../../../image/chat/images/luyin2.png";
	}else{
		obj.style.display = "block";
		obj1.style.display = "none";
		document.getElementById("ly").src = "../../../image/chat/images/luyin1.png";
	}
}

function insertText(str) {
	obj = document.getElementById('content');
	if (document.selection) {
		var sel = document.selection.createRange();
		sel.text = str;
	} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
		var startPos = obj.selectionStart,
		endPos = obj.selectionEnd,
		cursorPos = startPos,
		tmpStr = obj.value;
		obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
		cursorPos += str.length;
		obj.selectionStart = obj.selectionEnd = cursorPos;
	} else {
		obj.value += str;
	}
}

function moveEnd(obj){
		obj.focus();
		var len = obj.value.length;
	if (document.selection) {
		var sel = obj.createTextRange();
		sel.moveStart('character',len);
		sel.collapse();
		sel.select();
	} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
		obj.selectionStart = obj.selectionEnd = len;
	}
}

//发送消息
function sendpost(tag,val){
	if(tag==1){
		var text = val;
		if(text==''){ return false; }
	}else{
		var text = document.getElementById("content").value;
		if(text==''){ alert('请输入聊天内容');return false; }
	}
	
	/*
	$.post("<?php echo purl("member/post"); ?>",{id:<?php echo intval($_GET['id']); ?>,content:text},function(data,status){
		if(status=='success'){
			document.getElementById("content").value = '';
		}
    });*/
	
}

//读取消息
function getdata(){
	/*$.post("<?php echo purl("member/getdata"); ?>",{id:<?php echo intval($_GET['id']); ?>,name:"<?php echo $name; ?>",tx:"<?php echo $tx; ?>"},function(data,status){
		//alert(getdata);
		if(status=='success' && data!=''){
			$("#contentlist").append(data) ;
			var h = $(document).height()-$(window).height();
            $(document).scrollTop(h); 
		}
    });*/
}
//每隔5S读取一次数据
setInterval('getdata();', 5000);


//上传图片
/*$('#upfile').on('change', function() {
	var fd = new FormData();
	fd.append("upload", 1);
	fd.append("upfile", $("#upfile").get(0).files[0]);
	var toast = new auiToast();
	toast.loading({title:"正在上传",duration:2000});
	$.ajax({
		url: "<?php echo url('api/upload');?>",
		type: "POST",
		processData: false,
		contentType: false,
		data: fd,
		success: function(d) {
			toast.hide();
			if(d!=0){
				sendpost(1,d);
			}else{
				toast.fail({title:"上传失败",duration:2000});	
			}
		}
	});
});*/
/*
function showbig(imgurl){
	$("#bigsrc").attr("src",imgurl);
	$("#showbigpic").show();
	var width = $(window).width();
	var height = $(window).height();
	var imgheight=$('#bigsrc').height(); 　   //获得当前img高度  
    var imgwidth=$("#bigsrc").width();　　　　//获取当前img宽度
	$("#bigsrc").css("height",height); 
	$('#bigsrc').css('marginLeft',(width-imgwidth)/2)
	
}*/
</script>

</body>
</html>